<template>
   <div>
     <el-card>
       <el-row :gutter="20">
       <el-col :span="4">
         关键字:
         <MySelect :options="options" :selectData.sync="selectData.data"/>
       </el-col>
       <el-col :span="4">
         <el-input v-model="keyWord"></el-input>
       </el-col>
       <el-col :span="3">
        <el-button type="danger" @click="searchUser">搜索</el-button>
       </el-col>
       <el-col :span="2" :offset="10">
         <el-button type="danger" @click="showAddUserDialog">添加用户</el-button>
       </el-col>
     </el-row>
     <MyTable :option="tableOptions" :selectRow.sync="selectRow.data" ref="userTable">
       <!-- v-slot指令是具名插槽与作用域插槽的合并写法 -->
       <!-- 如果单独写 要写slot和slot-scope属性 -->
       <!-- 合并写 v-slot:插槽名= "插槽属性集合对象" -->
       <template v-slot:status="slotProps">
         <el-switch
         active-value="2"
         inactive-value="1"
  v-model="slotProps.row.status"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
       </template>
       <template v-slot:operation="slotProps">
         <el-button type="warning" @click="editUser(slotProps.row)">编辑</el-button>
         <el-button type="danger">删除</el-button>
       </template>
       <template>
         <el-button @click="removeManyUser">批量删除</el-button>
       </template>
     </MyTable>
     </el-card>
      <Dialog :visible="dialogVisible" @close="closeDialog" :editData="editData.data"/>
   </div>
</template>

<script>
import MySelect from '@/components/MySelect/index.vue'
import MyTable from '@/components/MyTable'
import { reactive, ref } from '@vue/composition-api'
import Dialog from './dialog/index.vue'
import { deleteUserRequest } from '@/api/user.js'
export default {
  components: {
    MySelect,
    MyTable,
    Dialog
  },
  setup (props, { root, refs }) {
    // 下拉框
    const options = reactive(['phone', 'username'])
    const selectData = reactive({
      data: {}
    })
    // 表格
    const tableOptions = reactive({
      col: [{
        label: '用户名',
        field: 'username'
      },
      {
        label: '真实名字',
        field: 'truename'
      },
      {
        label: '手机号',
        field: 'phone'
      },
      {
        label: '地区',
        field: 'region'
      },
      {
        label: '角色',
        field: 'role'
      },
      {
        label: '状态',
        field: 'status',
        colType: 'slot',
        slotName: 'status'
      },
      {
        label: '操作',
        colType: 'slot',
        slotName: 'operation'
      }],
      requestData: {
        url: 'getUserList',
        method: 'post',
        data: {
          pageNumber: 1,
          pageSize: 5
        }
      },
      isSelected: true,
      isPage: true
    })
    const selectRow = reactive({
      data: []
    })
    // 批量删除用户
    const removeManyUser = async () => {
      if (selectRow.data.length === 0) {
        return root.$message({
          message: '请选择要删的用户'
        })
      }
      const requestParams = selectRow.data.map(item => item.id)
      const { data: res } = await deleteUserRequest({
        id: requestParams
      })
      root.$message({
        type: 'success',
        message: res.message
      })
      refs.userTable.refreshData()
    }
    // 编辑用户
    const editUser = (userItem) => {
      editData.data = userItem
      showAddUserDialog()
    }
    // 对话框
    const dialogVisible = ref(false)
    const editData = reactive({
      data: {}
    })
    const showAddUserDialog = () => {
      dialogVisible.value = true
    }
    const closeDialog = () => {
      editData.data = {}
      dialogVisible.value = false
    }
    // 收缩栏
    const keyWord = ref('')
    const searchUser = () => {
      console.log(selectData.data.value, keyWord.value)
      refs.userTable.searchData(selectData.data.value, keyWord.value)
    }
    return {
      options,
      selectData,
      tableOptions,
      showAddUserDialog,
      closeDialog,
      dialogVisible,
      selectRow,
      removeManyUser,
      editUser,
      editData,
      searchUser,
      keyWord
    }
  }
}
</script>

<style>

</style>
